<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .box ,.demo {
            width: 200px;
            height: 100px;
            background-color: #ccc;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
            margin: 50px auto 0;
        }
    </style>
</head>
<body>
    <div class="box">未节流:0</div>
    <div class="demo">已节流:0</div>

    <script>
        // 节流: 是指一种在指定时间防止函数被频繁调用的思想
        // 节流函数: 结合时间戳来封装的函数,在指定的时间会执行一次代码(调用一次函数)


        // 封装节流函数
        // 参数:1. 回调函数, 2.时间  3. 布尔值
        // 时间戳: 毫秒值
        // 相差的毫秒值 = 结束的时间戳 - 开始的时间戳
        function trottle(callback,times,bool) {
            //记录开始的时间戳
            var startTime = new Date().getTime();
            // 记录布尔值
            var fistFlag = bool;
            // 返回function函数 (事件函数)
            return function() {
                // 记录结束的时间戳
                var endTime = new Date().getTime();
                // 相差的毫秒值
                var totalTime = endTime - startTime;
                // 记录事件对象
                var args = arguments[0];
                // 判断布尔值是否为true
                if(fistFlag){
                    if(typeof callback == "function"){
                        // 调用回调函数
                        callback(args);
                        // 设置布尔值为false
                        fistFlag = false;
                    }
                }

                // 判断是否达到指定的时间
                if(totalTime >= times){
                    // 符合条件执行回调函数
                    if(typeof callback == "function"){
                        // 调用回调函数
                        callback(args);
                        // 重置开始的时间戳
                        startTime = endTime;
                    }
                }
            }
        }

        // 获取.box标签和.demo标签
        var box = document.querySelector(".box");
        var demo = document.querySelector(".demo");
        // 计数器变量
        var count = 0;
        var key = 0;

        // 给页面绑定鼠标移动事件
        document.addEventListener("mousemove",function(){
            count ++;
            box.innerHTML = "未节流:"+count;
        })


        document.addEventListener("mousemove",trottle(function(){
            key ++;
            demo.innerHTML = "已节流:"+key;
        },1000,false))

    </script>
</body>
</html>